<template>
  <div class="container">
    <div class="header-box">
      <Header v-bind:isIndex="isIndex"></Header>
      <swiper class="padding-24" :options="swiperOption">
        <swiper-slide v-for="item in images" :key="item.id">
          <img :src="item.photo" alt  @click="toLink(item)"/>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 推荐专区部分 -->
    <div class="header-nav space-between">
      <div class="item" v-for="item in iconList" :key="item.id" @click="toWhere(item)">
        <img :src="item.icon" alt />
        <span>{{item.text}}</span>
      </div>
    </div>
    <!-- 轮播专区 -->
    <div class="lunbo" v-for="item in lunbo" :key="item.id">
      <div class="top arrow-right space-between">
        <span class="title">{{item.title}}</span>
        <span class="to-home more" @click="goToIndex(item)">进入首页</span>
      </div>
      <div class="lunbo-img">
        <swiper class :options="swiperOption1">
          <swiper-slide v-for="items in item.itemList" :key="items.id">
            <img :src="items.photo" @click="toLink(items)" alt />
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- <player v-if="musicMes" v-bind:isSpecial="isSpecial" :isFull="store.isFullPlay"></player> -->
    <Footer v-bind:titles="title"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer-nav";
import Header from "@/components/header-nav";
import Swiper from "swiper";
export default {
  name: "index",
  data() {
    return {
      musicMes: {},
      store: this.getStore(),
      isSpecial: true, //判断是不是一级页面改变mini播放器的呃位置
      isIndex: true,
      title: "首页",
      images: [], //轮播图
      iconList: [
        {
          id: 1,
          icon: require("@/assets/index/find.png"),
          text: "发现音乐"
        },
        {
          id: 2,
          icon: require("@/assets/index/radio-station.png"),
          text: "电台"
        },
        {
          id: 3,
          icon: require("@/assets/index/video-index.png"),
          text: "视频"
        },
        {
          id: 4,
          icon: require("@/assets/index/met.png"),
          text: "MET海选"
        },
        {
          id: 5,
          icon: require("@/assets/index/ticket.png"),
          text: "票务"
        }
      ],
      lunbo: [
        {
          status: 1,
          title: "音乐商城",
          itemList: []
        },
        {
          status: 2,
          title: "MET海选",
          itemList: []
        },
        {
          status: 3,
          title: "MET票务",
          itemList: []
        }
      ],
      swiperOption: {
        slidesPerView: "auto",
        centeredSlides: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 24,
        loop: true,
        speed: 800, //config参数同swiper4,与官网一致
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        }
      },
      swiperOption1: {
        slidesPerView: "auto",
        centeredSlides: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 24,
        loop: true,
        speed: 1000, //config参数同swiper4,与官网一致
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        }
      }
    };
  },
  components: {
    Footer,
    Header
  },
  methods: {
    // 进入首页
    goToIndex(item) {
      if (item.status == 1) {
        window.location.href = `https://test.izhixiu.cn/www/met/musicstore/#/`;
      }else if(item.status == 2){
        window.location.href = `https://www.metyou.wang/frontend/index.html#/index/sea-election`;
      }else if(item.status == 3){
        window.location.href = `https://www.metyou.wang/frontend/index.html#/index/ticket`;
      }
    },
    // 推荐专区跳转
    toWhere(item) {
      //console.log(item, "---item");
      switch (item.id) {
        case 1:
          window.sessionStorage.setItem("findStatus", JSON.stringify(1));
          this.$router.push({ path: "/index/find-music" });
          break;
        case 2:
          this.$router.push({ path: "/radio" });
          break;
        case 3:
          this.$router.push({ path: "/index/video-List" });
          break;
        case 4:
          this.$router.push({ path: "/index/sea-election" });
          break;
        case 5:
          this.$router.push({ path: "/index/ticket" });
          break;
      }
    },
    // 链接跳转
    toLink(item) {
      console.log(item.url, "---item.url");
       window.location.href = item.url;
    },
    // 首页banner图接口
    getBanner(type) {
      const url = this.$host1 + `home/advertisingShow?ad_type=` + type;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data,'----res.data');
          if (res.data.code == 200) {
            if (type == 1) {
              // 首页banner数据
              this.images = res.data.data;
              // console.log(res.data.data,'--banner');
            } else if (type == 2) {
              // 首页音乐商城轮播数据
              this.lunbo[0].itemList = res.data.data;
              // console.log(res.data.data,'--music');
            } else if (type == 3) {
              // 首页海选数据
              this.lunbo[1].itemList = res.data.data;
              // console.log(res.data.data,'--sea');
            } else if (type == 4) {
              // 首页票务数据
              this.lunbo[2].itemList = res.data.data;
              // console.log(res.data.data,'--ticket');
            }
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          this.AlertWin("网络错误！请稍后重试！");
          console.log(err, "err-----");
        });
    }
  },
  created() {
    this.musicMes = window.localStorage.getItem("musicMes");
    this.getBanner(1);
    this.getBanner(2);
    this.getBanner(3);
    this.getBanner(4);
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  // height: 100%;
  padding-bottom: 2.2rem;
  padding-top: 1rem;
  .header-box {
    position: relative;
    width: 100%;
    height: 2.83rem;
    margin-top: -0.3rem;
    background: linear-gradient(to right, #680dae, #9529c6);
    // background-color: pink;
    .swiper-container {
      // height: 2.83rem;
      color: #fff;
      position: absolute;
      left: 0;
      bottom: -0.65rem;
      .swiper-wrapper {
        width: 100% !important;
        margin-top: 1rem;
        background-color: pink !important;
        transform: translate3d(0px, 0px, 0px) !important;
        .swiper-slide {
          width: 100% !important;
          // background-color: blue;
          
          img {
            border-radius: 0.08rem;
            width: 100%;
          }
        }
      }
    }
  }
  // 推荐专区样式
  .header-nav {
    width: 100%;
    height: 2.8rem;
    background-color: #fff;
    padding: 1rem 0.24rem 0.32rem;
    box-sizing: border-box;
    .item {
      text-align: center;
      img {
        width: 0.98rem;
        height: 0.98rem;
        border-radius: 50%;
        margin: 0 auto;
        margin-bottom: 0.28rem;
      }
      span {
        font-size: 0.28rem;
        color: rgba(68, 68, 68, 1);
      }
    }
  }
  // 轮播专区
  .lunbo {
    width: 100%;
    height: 4.2rem;
    background-color: #fff;
    margin-top: 0.24rem;
    .top {
      position: relative;
      padding: 0.24rem;
      box-sizing: border-box;
      .title {
        font-size: 0.32rem;
        color: rgba(68, 68, 68, 1);
        font-weight: 800;
      }
      .to-home {
        display: block;
        right: 0.5rem;
        //background-color: red;
        position: absolute;
        font-size: 0.26rem;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
    }
    .lunbo-img {
      width: 100%;
      height: 3rem;
      img {
        width: 100%;
      }
    }
  }
}
</style>
